<template>
    <div @click="chooseCollection" class="radius10 marginTop20 relative cursor-pointer" :style="{'box-shadow: 0 0 5px #d1d1d1;':choose}" style="height: 220px;overflow: hidden;position: relative;">
        <el-image :src="data.thumbnail" fit="cover" style="height: 140px;width: 100%;"></el-image>
        <div class="flexSB publicWidth" style="position: absolute;bottom: 85px;margin-left: 20px;">
            <div class="flexFS">
                <div class="flexFS colorFFF size12">
                    <i class="el-icon-view vertical-middle"></i>
                    <span class="vertical-middle pl-4">{{data.total_viewed}}</span>
                </div>
            </div>

            <div class="flexFS">
                <div class="flexFS colorFFF size12">
                    <i class="el-icon-apple vertical-middle"></i>
                    <span class="vertical-middle pl-4">{{data.like_count}}</span>
                </div>
            </div>

            <div class="flexFS">
                <div class="flexFS colorFFF size12">
                    <i class="el-icon-chat-dot-round vertical-middle"></i>
                    <span class="vertical-middle pl-4">{{data.comment_count}}</span>
                </div>
            </div>
        </div>

        <div style="padding: 10px;">
            <div class="font-15">{{data.name}} ({{data.current_episode}}集/{{data.episodes}}集)</div>
            <div class="omit1 size12 color999" style="width: 100%;">{{data.desc}}</div>
            <!-- <span class="tagBox size12 color999">#热门</span> -->
            <div class="flex align-center jus-between">
                <div class="flex align-center">
                    <labels :index="index" :key="index" :name="item" @chooseLabel="chooseLabel" class="mt-3 mr-6" color="#666" v-for="(item,index) in data.labels" v-if="index<3"></labels>
                </div>
                <el-dropdown @command="chooseAction" v-if="choose">
                    <i class="iconfont icon-ellipsis cursor-pointer" style="font-size:18px" v-on:click.stop></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="update">修改</el-dropdown-item>
                        <el-dropdown-item command="remove">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div :style="choose_id==index ? 'border-top-color:red' : ''" class="choose-card cursor-pointer" v-if="choose">
            <i class="el-icon el-icon-check color-fff choose-card-icon"></i>
        </div>
    </div>
</template>

<script>
import labels from '@/components/creation/label.vue'
export default {
    components: {
        labels,
    },
    props: {
        choose: {
            type: Boolean,
            default: false,
        },
        choose_id: {
            type: Number,
            default: null,
        },
        index: {
            type: Number,
            default: 0,
        },
        data: {
            type: Object,
            default() {
                return {
                    labels: [],
                }
            },
        },
    },
    data() {
        return {
            action_visible: false,
        }
    },
    methods: {
        chooseLabel() {},
        chooseCollection() {
            this.$emit('chooseCollection', this.index)
        },
        chooseAction(value) {
            switch (value) {
                case 'update':
                    return this.update()
                    break
                case 'remove':
                    return this.remove()
                    break
            }
        },
        update() {
            this.$emit('update',this.data)
        },
        remove() {
            this.$confirm('此操作将删除该视频合集和对应的数据, 是否继续?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$request
                    .del('/creation-collection/delete/' + this.data.collection_id)
                    .then((res) => {
                        this.$emit('refresh')
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                        })
                    })
                    .catch((error) => {})
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.choose-card {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 0px solid transparent;
    border-top: 40px solid rgba(0, 0, 0, 0.5);
    &-icon {
        position: absolute;
        top: -36px;
        right: 4px;
    }
}
</style>